<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
		<title>TestYourShell | Welcome</title>
		<link rel="shortcut icon" href="static/images/favicon"/>
    	<!-- Bootstrap CSS -->
    	<link href="static/lib/bootstrap-3.1.1/css/bootstrap.css" type="text/css" rel="stylesheet"/>
    	<!-- DataTables CSS -->
		<link rel="stylesheet" type="text/css" href="static/lib/DataTables-1.10.0/media/css/jquery.dataTables.css"/>
    	<!-- Custom CSS -->
    	<link href="static/css/main.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<div class="page-header">
			<h1>TestYourShell.com <small>Choose the best one!</small></h1>
		</div>
		<div class="row">
			<div class="col-md-3" id="left-side">
				<form class="form-signin" action="j_spring_security_check" method="post">
					<h2 class="form-signin-heading">Enter the system</h2>
					<div class="form-group">
						<label for="j_username">Username</label>
						<input type="text" class="form-control" id="j_username" name="j_username" placeholder="Username"></input>
					</div>
					<div class="form-group">
						<label for="j_password">Password</label>
						<input type="password" class="form-control" id="j_password" name="j_password" placeholder="Password"></input>
					</div>
					<div class="checkbox">
						<label>
							<input type="checkbox" name="_spring_security_remember_me" value="remember-me"></input>
							Remember me
						</label>
					</div>
					<button type="submit" class="btn btn-lg btn-primary btn-block">Sign in</button>
				</form>
			</div>
			<div class="col-md-9" id="right-side">
				<div class="jumbotron">
					<div class="container">
						<h1>Share your results</h1>
						<p>TestYourShell is an easy way to arrange test modules for developers
						 and to publish these test execution results for those users who want 
						 to know which graphic shell is the best one.</p>
						<p>Join us!</p>
					</div>
				</div>
				<table id="last-added-tests" class="table table-striped">
					<caption>Last added test results</caption>
					<thead>
						<tr>
							<th>Test</th>
							<th>Added by</th>
							<th>Date</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>s&amp;d</td>
							<td>user71598</td>
							<td>2014-05-13 15:36:28</td>
						</tr>
						<tr>
							<td>s&amp;d</td>
							<td>alex</td>
							<td>2014-05-13 15:08:16</td>
						</tr>
						<tr>
							<td>images</td>
							<td>mike3</td>
							<td>2014-05-13 15:08:14</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div id="footer">
			<p class="text-muted text-center">Alexey Shitikov &copy; 2014</p>
		</div>	

		<!-- jQuery JS -->
		<script type="text/javascript" charset="utf8" src="static/lib/jquery-1.11.0/jquery-1.11.0.js"></script>
		<!-- Bootstrap JS -->
		<script type="text/javascript" charset="utf8" src="static/lib/bootstrap-3.1.1/js/bootstrap.js"></script>
		<!-- DataTables JS -->
		<script type="text/javascript" charset="utf8" src="static/lib/DataTables-1.10.0/media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf8">
			$(document).ready( function () {
				$("last-added-tests").dataTable({
					"processing": true,
					"serverSide": true,
					"ajax": {
						"url": "tests/last" 
					},
					"columns": [
						{ "data": "testName" },
						{ "data": "user" },
						{ "data": "date" }
					]
				});
			});
		</script>
	</body>
</html>
